<template>
	<view class="container">
		<view class="search" @tap="detail.toSearch">
			<view class="uni-input-wrapper">
				<input type="text" disabled v-model="detail.inputValue" placeholder="请输入搜索关键词" placeholder-class="placeholder">
				<image class="search_icon" :src="url+'icon-71.png'" mode=""></image>
			</view>
			<view class="btn">搜索</view>
		</view>
		<view class="store" v-if="detail.store">
			<image :src="detail.store.brandsLogo" mode=""></image>
			<view>
				<view class="name">{{detail.store.brandsName}}</view>
				<view class="briefIntroduction xjs-line-one" @tap="detail.modelShow=true">{{detail.store.remark}}</view>
			</view>
			<image @tap="detail.shareApp" class="share" :src="url+'icon-88.png'" mode=""></image>
			<!-- #ifdef MP-WEIXIN -->
			<button class='share_btn' open-type="share">分享</button>
			<!-- #endif -->
		</view>
		<view class="main">
			<view class="nav">
				<scroll-view class="nav-scroll" :scroll-with-animation='true' scroll-x="true"
					:scroll-into-view="scroll.clickToId" :scroll-left="scroll.left">
					<view :id="'nav'+index" v-for="(item,index) in scroll.allArr" class="scroll-inner" :key="index"
						@click="scroll.btnNav(index)" :class="scroll.navIndex==index?'show':''">
						{{item.groupName}}
						<image :src="url + 'icon-101.png'"></image>
					</view>
				</scroll-view>
			</view>
			<scroll-view id="scroll" @scroll="scroll.scrollSun" :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="scroll.clickToId"
				class="hei">
				<view class="contentContent" style="padding-bottom: calc(32rpx + var(--status-bar-height));">
					<view class="classbox" :id='"center"+i' v-for="(items,i) in scroll.allArr" :key="i">
						<view class="fenl_text" :id='"nav"+i'>{{items.groupName}}</view>
						<shopList :isLine="true" :list='scroll.allArr[i].data'></shopList>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="model" v-if="detail.modelShow">
			<view class="model_content">
				<view class="content_title">{{detail.store.brandsName}}</view>
				<view class="content_content">{{detail.store.remark}}</view>
				<view class="content_btn" @tap="detail.modelShow=false">关闭</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,reactive,nextTick } from 'vue';
import api from '@/api'
import configs from '@/config';
import {onLoad,onShareAppMessage,onShow} from '@dcloudio/uni-app'
import { useUserStoreToRefs } from '@/store/useUserStore';
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const { userInfo } = useUserStoreToRefs();
onLoad( async(e)=>{
	detail.brands = e.brands?e.brands:'10001'
})

onShow(async()=>{
	uni.showLoading({
		mask: true,
		title: "加载中"
	})
	detail.modelShow = false
	await detail.getDeta()
	await scroll.getList()
})

//门店详情数据
const detail = reactive({
	inputValue:'',//输入框
	brands:'',//品牌id
	store:null,
	modelShow:false,
	getDeta: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/brands/${detail.brands}`,
		})
		detail.store = res.data
	},
	toSearch:()=>{
		uni.navigateTo({
			url:'/pages/shopping/search/index'
		})
	},
	shareApp: async () => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${detail.brands}&type=9`;
		const res: any = await api({
			method: 'POST',
			url: `/mall/user/v2/generateWxUrlLink`,
			data: {
				path: '/pages/shareRefereeId/index',
				query: `q=${encodeURIComponent(cans)}`,
				envVersion: configs.envVersion
			}
		});
		console.log('shareWithSystem',res.data)
		uni.shareWithSystem({
			summary:"",
			imageUrl:"",
			href: res.data,
			success() {
				// 分享完成，请注意此时不一定是成功分享
			},
			fail() {
				// 分享失败
			}
		});
	},
	
})
//滚动
const scroll = reactive({
	clickToId:'',//节点id
	left: 0,//导航条滚动距离
	topArr:[],//导航条里面元素的宽度
	allArr:[],//列表数据
	centerArr:[],//页面中每个节点的高度
	navIndex: 0,//当前导航条高亮滑块
	getList: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/goods-group/brandsGroupGoods/${detail.brands}`,
		})
		scroll.allArr = res.data
		uni.hideLoading()
		if (res.data.length > 0) {
			let navWidth = 0
			let lens = 0
			scroll.topArr = []
			scroll.centerArr = []
			for (let i = 0; i < res.data.length; i++) {
				let data:any = await scroll.computedSwiperHeight('#nav' + i);
				navWidth += data.width;
				scroll.topArr.push(navWidth - 20)
				let res2:any = await scroll.computedSwiperHeight('#center' + i);
				lens += res2.height
				scroll.centerArr.push(lens + 10)
			}
		}
		let height:any = scroll.computedSwiperHeight('#scroll')
	},
	// 商品列表高度计算
	computedSwiperHeight : async (selectQuery:string) => {
		return new Promise((resolve, reject) => {
			nextTick(() => {
				// #ifdef MP-WEIXIN
				const query = wx.createSelectorQuery()
				// #endif
				query.select(selectQuery).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					resolve(res[0])
				})
			})
		});
		
	},
	scrollSun:(e)=>{
		scroll.clickToId = '';
		let scrollTop = e.target.scrollTop;
		let len = scroll.centerArr.length;
		for (let i = 0; i < len; i++) {
			let h1 = scroll.centerArr[i];
			let h2 = scroll.centerArr[i - 1] == undefined ? 0 : scroll.centerArr[i - 1];
			if (scrollTop >= h2 && scrollTop < h1) {
				scroll.left = scroll.topArr[i]
				scroll.navIndex = i;
			}
		}
	},
	btnNav:(i:number)=>{
		scroll.navIndex = i;
		scroll.clickToId = 'nav' + i;
	}
})
onShareAppMessage(()=>{
	let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${detail.brands}&type=9`;
	return {
		title: detail.store.brandsName,
		path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
		imageUrl: detail.store.brandsLogo
	};
})
</script>

<style lang="scss" scoped>
.container{
	line-height: 1;
}
.search{
	width: 100%;
	height: 88rpx;
	// padding-top: var(--status-bar-height);
	@include flex(center,space-between);
	background-color: #ffffff;
	border-bottom: 1rpx solid #E4E6E6;
	.uni-input-wrapper{
		width: 636rpx;
		position: relative;
		padding-left: 32rpx;
		box-sizing: border-box;
		.search_icon{
			position: absolute;
			top: 16rpx;
			left: 56rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	input{
		width: 604rpx;
		height: 72rpx;
		font-size: 30rpx;
		color: #1B2120;
		background: #F9F6F6;
		border-radius: 200rpx;
		padding-left: 96rpx;
		box-sizing: border-box;
	}
	.placeholder{
		color: #CACCCC;
	}
    .btn{
		font-weight: bold;
		font-size: 32rpx;
		color: #FF6084;
		margin-right: 32rpx;
	}
}
.store{
	padding: 48rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	@include flex(center);
	position: relative;
	image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 24rpx;
		margin-right: 16rpx;
	}
	.share{
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 48rpx;right: 48rpx;
	}
	.share_btn{
		width: 48rpx;
		height: 48rpx;
		opacity: 0;
		position: absolute;
		top: 48rpx;right: 48rpx;
	}
	>view{
		width: calc(100% - 136rpx);
		.name{
			width: calc(100% - 50rpx);
			line-height: 46rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #1A1A1A;
		}
		.briefIntroduction{
			color: #808080;
			font-size: 28rpx;
			margin-top: 24rpx;
		}
	}
}
.main{
	padding-top: 16rpx;
	padding-bottom: 48rpx;
	box-sizing: border-box;
	background-color: #F9F6F6;
	.nav{
		position: sticky;
		top: 0;z-index: 99;
		padding:32rpx 0 0 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		.nav-scroll{
			white-space: nowrap;
		}
		.scroll-inner{
			height: 76rpx;
			position: relative;
			display: inline-block;
			margin-right: 48rpx;
			font-size: 30rpx;
			color: #5C5E5E;
			image{
				width: 40rpx;
				height: 14rpx;
				margin-top: 4rpx;
				position: absolute;
				display: none;
				bottom: 8rpx;
				left: 50%;
				margin-left: -24rpx;
			}
		}
		.show{
			font-weight: bold;
			font-size: 40rpx;
			color: #1B2120;
			image{display: block;}
		}
	}
    .hei{
		height: 100vh;
		padding: 0 32rpx;
		box-sizing: border-box;
		.fenl_text{
			color: #1B2120;
			font-size: 30rpx;
			margin: 48rpx 0 24rpx;
		}
	}
}
.model{
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;top: 0;
	z-index: 999;
	background: rgba(0,0,0,0.4);
	@include flex(flex-end);
	.model_content{
		width: 100%;
		background: #FFFFFF;
		padding: 48rpx 40rpx 28rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: calc(var(--safe-area-bottom) + 28rpx);
	}
	.content_title{
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #1A1A1A;
	}
	.content_content{
		color: #1B2120;
		font-size: 28rpx;
		line-height: 56rpx;
		margin: 48rpx 0 32rpx;
		box-sizing: border-box;
	}
	.content_btn{
		border-top: 16rpx solid #F5F6F7;
		padding-top: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #1B2120;
	}
}
</style>
